import React, {Component} from 'react';
import cssModule from './postDetail.module.less'
import testimg from "../../assets/img/001.jpg";


import {NavBar, Button} from 'antd-mobile';


class PostDetail extends Component {
    onGoTo = (url) => this.props.history.push(url)
    onBack = () => this.props.history.goBack()

    render() {

        return (
            <div className='bg-White'>
                <div className='sticky wid1p' style={{top: 0}}>
                    {/*导航栏*/}
                    <NavBar
                        mode="light"
                        leftContent={[
                            <i key="3" className='iconfont fo-24 mr10' onClick={() => this.onBack()}> &#xe744;</i>,
                        ]}
                        rightContent={[
                            <i key="0" className='iconfont fo-24 mr10'>&#xe604;</i>,
                            <i key="1" className='iconfont fo-24 mr10'>&#xe612;</i>,
                            <i key="2" className='iconfont fo-24'>&#xe636;</i>
                        ]}
                    />
                </div>
                <div className='padd20'>
                    {/*标题*/}
                    <section className='flex just-spa-bet ali-sta'>
                        <h3 className='font-wei600 fo-22 mr6 max-wid-percent-70 line-hei-30 over-two-line'>
                            <span className=''>web前端助教兼职开发工程师</span>
                            <span className='ml6 small-tag-line-orange txt-middle'>校招</span>
                        </h3>
                        <p className='fo-green line-hei-30 fo-16 font-wei600'>6-10K·13薪</p>
                    </section>
                    {/*地区*/}
                    <section className='flex ali-cen fo-12 fo-gray mt10'>
                        <div className='flex ali-cen mr10'>
                            <i className='iconfont fo-24 mr2'>&#xe68b;</i>
                            <span>杭州-西湖-西悉</span>
                        </div>
                        <div className='flex ali-cen mr10'>
                            <i className='iconfont fo-24 mr2'>&#xe699;</i>
                            <span>在校/应届</span>
                        </div>
                        <div className='flex ali-cen mr10'>
                            <i className='iconfont fo-24 mr2'>&#xe66b;</i>
                            <span>本科</span>
                        </div>
                    </section>
                    <div className='line-WhiteSmoke mt10'></div>
                    {/*招聘者信息简介*/}
                    <section className='flex ali-cen just-spa-bet mt14'
                             onClick={() => this.onGoTo('/RecruiterHomePage')}>
                        <div className='flex ali-cen'>
                            <img className='yicon-40 radius50p mr10' src={testimg}/>
                            <div className='flex flex-col'>
                                <span>陈女士<span className='ml10 fo-gray'>刚刚活跃</span></span>
                                <span className='mt6'>九章算法 · 招聘者</span>
                            </div>
                        </div>
                        <i className='iconfont fo-gray fo-20'>&#xe743;</i>
                    </section>
                    <div className='line-WhiteSmoke mt10'></div>

                    {/*职位详情*/}
                    <section className='flex flex-col mt14'>
                        <p className='font-wei600 fo-16'>职位详情</p>
                        {/*职位详情-标签*/}
                        <section className='flex ali-cen flex-wrap mt14'>
                            <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>HTML</span>
                            <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>CSS</span>
                            <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>JS</span>
                            <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>VUE</span>
                            <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>React</span>
                            <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>radius</span>
                            <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>golang</span>
                            <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>python</span>
                            <span className='mr8 mb8 bg-WhiteSmoke padd6 radius6 fo-12 fo-gray'>mysql</span>
                        </section>
                        {/*职位详情-内容介绍*/}
                        <div className='flex flex-col line-hei-24'>
                            <p>毕业事件2020</p>
                            <p>招聘截至日期2021.06.30</p>
                            <p>[岗位介绍]</p>
                            <p>阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊
                                阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊
                                阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊
                                阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊
                                阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊阿斯兰的卡上爱丽丝打开啊</p>
                        </div>
                    </section>
                    <div className='line-WhiteSmoke mt10'></div>
                    {/*公司信息简介*/}
                    <section className='flex ali-cen just-spa-bet mt14' onClick={() => this.onGoTo('/CompanyHomepage')}>
                        <div className='flex ali-cen'>
                            <img className='yicon-46 radius6 mr10' src={testimg}/>
                            <div className='flex flex-col'>
                                <span className='fo-14'>九章算法（杭州）科技在线优先公司</span>
                                <p className='mt6 fo-12'>
                                    <span>不需要融资</span>
                                    <span className='paddlr6'>·</span>
                                    <span>20-99人</span>
                                    <span className='paddlr6'>·</span>
                                    <span>在线教育</span>
                                </p>
                            </div>
                        </div>
                        <i className='iconfont fo-gray fo-20'>&#xe743;</i>
                    </section>
                    <div className='line-WhiteSmoke mt10'></div>


                    {/*地区区域*/}
                    <div className='mt10' style={{height: '200px', width: ' 100%', background: 'gray'}}/>


                    <div className='line-WhiteSmoke mt10'></div>
                    {/*温馨提示*/}
                    <div className='flex ali-cen fo-14 fo-red mt10'>
                        <i className='iconfont fo-20 mr10'>&#xe636;</i>
                        <span>温馨提示</span>
                    </div>
                    <p className='fo-12 mt10'>该Boss承偌名下所有职位不向您收费，如有不实，请立即举报</p>
                    <div className='line-WhiteSmoke mt10'></div>


                    {/*工作体验*/}
                    <p className='font-wei600 fo-18 mt16'>
                        TA在这里的工作体验
                    </p>
                    <div className='mt10 padd10 radius6 bg-WhiteSmoke'>
                        <div className='line-hei-20'>
                            <b>使命感</b>
                            <p>3月份来到这里当了总裁，怎么说呢，让我命啊比的自己的艾德卡速度较快拉升阶段就爱看圣诞节阿卡索的</p>
                        </div>
                    </div>

                    {/*占位符*/}
                    <div style={{height: '60px', width: ' 100%'}}/>
                </div>
                <footer className={cssModule.footer}>
                    <Button type="primary">立即沟通</Button>
                </footer>
            </div>
        );
    }
}

export default PostDetail;